<template>
<!--  转正管理   -->
  <el-scrollbar height="650px">
  <div class="big_box_one Logistics_Max">
    <div class="Logistics_Top" >
      <div class="Logistics_Left">
        <div class="Logistics_Svg">
          <svg t="1665655033419" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8086" width="36" height="36"><path d="M494.08 547.953778a199.111111 199.111111 0 1 1 0-398.222222 199.111111 199.111111 0 0 1 0 398.222222z m0-56.888889a142.222222 142.222222 0 1 0 0-284.444445 142.222222 142.222222 0 0 0 0 284.444445z" p-id="8087" fill="#1296db"></path><path d="M731.932444 600.689778a28.444444 28.444444 0 0 1-43.235555 36.977778 256 256 0 0 0-450.616889 166.286222 28.444444 28.444444 0 1 1-56.888889 0 312.888889 312.888889 0 0 1 550.741333-203.264z" p-id="8088" fill="#1296db"></path><path d="M696.32 793.770667l-60.302222-60.302223a28.444444 28.444444 0 1 0-40.277334 40.220445l80.440889 80.440889a28.444444 28.444444 0 0 0 40.220445 0l160.938666-160.881778a28.444444 28.444444 0 1 0-40.220444-40.277333l-140.8 140.8z" p-id="8089" fill="#1296db"></path></svg>        </div>
        <div class="Logistics_Name"> 转正管理：</div>
      </div>

    </div>

    <div class="Logistics_Table">
      <div class="p_two">
            <span style="margin: 10px;font-size: 14px">
          姓名:
            <el-input v-model="talents.posName" placeholder="姓名" style="width: 200px;margin: 10px 10px "/>
        </span>
        <el-form-item label="流程状态" style="float: right;position: relative;top: 10px;right: 700px;font-size: 14px">
          <el-select v-model="form.region"  placeholder="流程状态" style="font-size: 14px" >
            <el-option label="待审批中" value="shanghai" />
            <el-option label="审批成功" value="beijing" />
            <el-option label="审批失败" value="zhuzho"/>
          </el-select>
        </el-form-item>

        <div style="float: right">
          <router-link :to="{path:'/perrelationship/regularization/ap'}" event="mouseover" style="float: right;position: relative;top: 10px;right: -200px">
            <el-button type="primary">转正申请</el-button>
          </router-link>
<!--          <div style="float: right;position: relative;top: 27px;right: -340px">-->
<!--            <el-dropdown>-->
<!--              <el-icon>-->
<!--                <img src="src/assets/zhongfang/arrow-down.png" style="width: 25px;height: 25px; margin-top: -20px"/>-->
<!--              </el-icon>-->
<!--              <template #dropdown>-->
<!--                <el-dropdown-menu>-->
<!--                  <el-dropdown-item>导出</el-dropdown-item>-->
<!--                  <el-dropdown-item><span @click="allpos()">搜索</span></el-dropdown-item>-->
<!--                  <el-dropdown-item>删除</el-dropdown-item>-->
<!--                </el-dropdown-menu>-->
<!--              </template>-->
<!--            </el-dropdown>-->
<!--          </div>-->
        </div>
      </div>


      <div class="p_three">
        <el-table :data="d.tableData" style="width: 100%; height: 450px; text-align: center;border-top: 1px solid #EBEEF5"
                  :header-cell-style="{background:'#eef1f6',color:'#606266'}" stripe>
          <el-table-column type="selection"/>
          <el-table-column align='center'  property="sysEmployee.empName" label="申请人" width="140" type="selectio">
            <template #default="scope">
              <div @click="xiangqin(scope.row)">
                {{ scope.row.sysEmployee.empName}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'  property="dept.deptName" label="申请人部门" width="140"/>
          <el-table-column align='center'  property="post.postName" label="转正岗位" width="140"/>
          <el-table-column align='center'  property="sysEmployee.empInter" label="入职日期" width="160"/>
          <el-table-column align='center'  property="posDate" label="申请日期" width="200" />
          <el-table-column align='center'  property="posState" label="流程状态" width="250" >
            <template #default = "s">
              <div style="background:rgb(234,242,251);color:#446af3;height:80%;width:60%;margin:0 20% 0;font-size: 12px" v-if="s.row.posState==1">审批中</div>
              <div style="background:rgb(217,246,229);color:#479d5c;height:80%;width:60%;margin:0 20% 0;font-size: 12px" v-if="s.row.posState==2">同意转正</div>
              <div style="background:rgb(252,240,241);color:#D93e34;height:80%;width:60%;margin:0 20% 0;font-size: 12px" v-if="s.row.posState==3">拒绝转正</div>
            </template>
          </el-table-column>
          <el-table-column align='center'  property="bookNumber" label="操 作" width="180">
            <template #default = "s">
                  <el-button v-if="s.row.posState==2" @click="a(s.row)"  type="primary" plain>转正合同</el-button>
                  <el-button v-if="s.row.posState==3" @click="aa(s.row)"  type="primary" plain>辞退合同</el-button>
                  <el-button v-if="s.row.posState==1" @click=""  type="primary" plain>审 批 中</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-row justify="center">
          <el-col>
            <el-pagination
                v-model:currentPage="d.pageNo"
                v-model:page-size="d.pageSize"
                :page-sizes="[5,10, 20, 30, 40]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="d.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
          </el-col>
        </el-row>
      </div>


    </div>

  </div>
  </el-scrollbar >
</template>

<script lang="ts" setup>
import {onBeforeMount, reactive, ref} from "vue";
// 向后台发送请求
import axios from "axios";
import {useRouter} from "vue-router";

const form = reactive({
  posName:'',
  posSector:'',
  posDate:'',
  understand:'',
  expression:'',
  deficiency:'',
  doBetter:'',
  positiveAdvice:'',
  posState:'',
})


const d = reactive({
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:10,
  tableData:[],
});

//查询全部转正申请数据
const zf=()=>{
  axios.get("personnelOa/Positive/allPositive")
      .then((res)=>{
        d.tableData = res.data.data;
        console.log(res.data.data)
        ALltableData.value = d.tableData;//放入表格
        d.total = res.data.data.length;//获得它的长度
      })
      .catch()
}
const ALltableData=ref([])
const getTabelData=()=>{//分页，这里没必要管一样就行
  let data =JSON.parse(JSON.stringify(ALltableData.value));//把数据转为JSON格式
  let shu = data.splice(
      (d.pageNo - 1) * d.pageSize,
      d.pageSize
  )
  d.tableData = shu ;
}

const handleSizeChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageSize = val ;
  d.pageNo = 1;
  getTabelData();
}

const handleCurrentChange = (val: number) => {//分页，这里没必要管一样就行
  console.log("翻页，当前为第几页", val)
  d.pageNo = val;
  getTabelData();
}
const xiangqin=(row)=>{
  console.log(row.posId)
  router.push({path:"/perrelationship/regularization/ap",query:{id:row.empId}})
}
onBeforeMount(()=>{
  zf();
})

const textarea = ref('')

const router= useRouter();
const a=(Positive)=>{
  console.log(Positive)
  router.push({path:"/perrelationship/bargain/contract/newcontractsign",query:{id:Positive.empId}})
}
const aa=(Positive)=>{
  console.log(Positive)
  router.push({path:"/perrelationship/bargain/contract/relievecontractsign",query:{id:Positive.empId}})
}

//条件查询表单数据模型
let talents= reactive({
  posName:''
})
//条件查询出人才
const allpos=()=>{
  console.log(talents)
  axios.post("personnelOa/Positive/allpos",talents)
      .then((res)=>{
        d.tableData =res.data.data;

      })
      .catch()
}
</script>

<style scoped>
.big_box_one{
  background: #F1F1F1;
  height: 100%;
  width: 100%;
}
.p_one{
  border-bottom: 1px solid #0270C1;
  height: 60px;
}
.p_two{
  border: 0px solid red;
  height: 50px;
  background: white;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

.demo-date-picker {
  display: flex;
  width: 40%;
  padding: 0;
  flex-wrap: wrap;

}
.demo-date-picker .block {
  padding: 8px 0;
  /*border-right: solid 1px var(--el-border-color);*/
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;

}
</style>